<template>
  <view class="order-paid" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:statusBar+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">订单</view>
		</view>
		<view class="navigation-position"></view>
    <view class="content">
     <!-- <card-com :show-gap="false">
        <view class="product">
          <image
              class="cover"
              mode="aspectFit"
              :src="selectedSku.pic_url"
          ></image>
          <view class="desc">
            <view class="name">{{ product.title }}</view>
            <view class="sku">{{ selectedSku.name }} × {{ selectedSkuCount }}</view>
            <view class="price">￥ {{ order.total_amount }}</view>
          </view>
        </view>
      </card-com> -->

      <card-com>
		  <view class="paystate-content">
			<image src="/static/images/club-success.png" class="paystate" mode=""></image>
			<view class="paystate-text">支付成功</view>
			<view class="paystate-desc">
				<view>
					支付成功，您可去 
					<text class="my-order"  @click="goToMyOrder()">我的订单</text> 
					里查看订单详情
				</view>
			</view>
			<view class="btn-all">
				<!-- <view class="go-other" @click="backHome()">去逛逛</view> -->
				<view class="paystate-btn" @click="backHome()">返回首页</view>
				
			</view>
			
		  </view>
      </card-com>
    </view>
  </view>
</template>

<script>
import store from 'store'
import {mapGetters} from 'vuex'

export default {
  name: "paid",
  store,
  computed: {
    ...mapGetters([
      'product',
      'selectedSku',
      'selectedSkuCount',
      'order',
			'statusBar'
    ])
  },
  methods: {
		back(){
			uni.navigateBack()
		},
    async goToMyOrder() {
			
			uni.redirectTo({
				url: `/packs/pages/order/show?id=${this.order.id}`
			})
			
    },
	backHome() {
		uni.getStorage({
			key: 'token',
			success: function (res) {
				
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			fail:function(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		})
	},
  },
  onUnload: function () {
    // wx.reLaunch({url: `/packs/pages/order/show?id=${this.order.id}`})
  }
}
</script>

<style lang="scss" scoped>
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:22rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.paystate-content{
		width:100%;
		text-align: center;
		
	}
	.paystate{
		display:flex;
		width:130rpx;
		height:130rpx;
		margin:50rpx auto;
	}
	.paystate-text{
		font-size:40rpx;
		color:#333;
		
	}
	.paystate-desc{
		
		margin-top:20rpx;
		color:#333;
		font-size:26rpx;
		text-indent:0.29rpx; 
	}
	.my-order{
		color:#E97254;
		
	}
	.go-other{
		background:#E97254;
		color:#fff;
		width:220rpx;
		height:60rpx;
		text-align: center;
		line-height:60rpx;
		font-size:30rpx;
		border-radius:10rpx;
		border:1rpx solid #E97254
		
	}
	
	.paystate-btn{
		background:#E97254;
		color:#fff;
		width:220rpx;
		height:60rpx;
		text-align: center;
		line-height:60rpx;
		font-size:30rpx;
		border-radius:10rpx;
		border:1rpx solid #E97254;
		margin:0 auto;
	}
	.btn-all{
		margin:40rpx auto;
	}


</style>
